<template>
  <div id="yunfei">
    <el-button @click="centerDialogVisible = true">运费模板</el-button>

    <el-dialog title="运费模板" :visible.sync="centerDialogVisible" width="1300px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="模板名称:">
          <div class="module-name">
            <el-input v-model="form.name"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="计费方式：">
          <el-radio v-model="form.radio" :label="1">按件数</el-radio>
          <el-radio v-model="form.radio" :label="2">按重量</el-radio>
          <el-radio v-model="form.radio" :label="3">按体积</el-radio>
        </el-form-item>
        <el-form-item label="配送区域及运费：">
          <div class="table">
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              border
            >
              <el-table-column label="可配送区域：" width="180">
                <template slot-scope="scope">
                  <el-cascader
                    v-if="!scope.row.address"
                    :options="options"
                    :props="props"
                    collapse-tags
                    clearable
                    @change="Changes"
                    size="small"
                  ></el-cascader>
                  <div v-else>{{ scope.row.address }}</div>
                </template>
              </el-table-column>

              <el-table-column :label="onceType" width="180">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.once"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    size="small"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="运费（元）" width="180">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.freight"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    size="small"
                  ></el-input-number></template
              ></el-table-column>
              <el-table-column :label="continueType" width="180"
                ><template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.continue"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    size="small"
                  ></el-input-number
                ></template>
              </el-table-column>
              <el-table-column label="续费（元）" width="180"
                ><template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.refinance"
                    controls-position="right"
                    @change="handleChange"
                    :min="1"
                    size="small"
                  ></el-input-number
                ></template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div
                    v-if="!scope.row.address"
                    @click="del(scope.$index)"
                    style="cursor: pointer"
                  >
                    删除
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="add">
            <el-button type="primary" size="small" icon="el-icon-edit" @click="add"
              >添加配送区域</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="指定包邮：">
          <el-radio v-model="form.open" :label="1">开启</el-radio>
          <el-radio v-model="form.open" :label="2">关闭</el-radio>
        </el-form-item>
        <el-form-item label="排序：">
          <div class="module-name">
            <el-input v-model="form.sort"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit(form.name)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import { Citylist, addModule, shippingList } from "@/network/api/store/index";
export default {
  async created() {
    let city = await Citylist();
    let list = this.cityDispose(city.data.data);
    // console.log("city", list);
    this.options = [...list];
  },
  data() {
    return {
      props: { multiple: true },
      centerDialogVisible: false,
      form: {
        name: "",

        delivery: false,
        type: [],
        sort: 1,
        radio: 1,
        open: 2,
      },
      tableData: [
        { address: "全国配送", once: 1, freight: 0, continue: 1, refinance: 1 },
      ],
      options: [],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleChange() {},
    add() {
      let { tableData } = this.$data;

      let obj = {
        address: "",
        once: 1,
        freight: 0,
        continue: 1,
        refinance: 1,
      };
      tableData.push(obj);

      this.tableData = [...tableData];
    },
    // 数据处理
    cityDispose(data) {
      let arr = [];
      data.forEach((item) => {
        let obj = {
          value: item.cityId,
          label: item.name,
        };
        if (item.child && item.child.length != 0) {
          obj.children = this.cityDispose(item.child);
        }
        arr.push(obj);
      });
      // console.log(12345, arr);
      return arr;
    },
    // 删除
    del(index) {
      this.tableData.splice(index, 1);
    },
    Changes(value) {
      console.log(12315, value);
    },
    async submit(name) {
      this.centerDialogVisible = false;
      let data = {
        appoint: false,
        name,
        shippingTemplatesRegionRequestList: [
          {
            first: 1,
            firstPrice: 0,
            renewal: 1,
            renewalPrice: 0,
            city_ids: [],
            title: "[[0,0]]",
            cityId: "all",
          },
        ],
        sort: 0,
        type: 1,
      };
      let res = await addModule(data);
      let city = await shippingList();
      let shipList = city.data.data.list;
      // let list = this.cityDispose(city.data.data);
      // console.log("city", list);
      this.$emit("send", shipList);
    },
  },
  computed: {
    onceType() {
      //   console.log(this.radio);
      if (this.form.radio == 1) {
        return "首件";
      } else if (this.form.radio == 2) {
        return "首件（kg）";
      } else if (this.form.radio == 3) {
        return "首件（m³）";
      }
    },
    continueType() {
      if (this.form.radio == 1) {
        return "续件";
      } else if (this.form.radio == 2) {
        return "续件（kg）";
      } else if (this.form.radio == 3) {
        return "续件（m³）";
      }
    },
  },
};
</script>

<style lang="scss">
#yunfei {
  .module-name {
    display: inline-block;
    input {
      width: 500px !important;
    }
  }
  .el-form-item__label {
    font-size: 12px;
  }
  .table {
    position: relative;
    left: -80px;
  }
  .add {
    margin-top: 15px;
    margin-left: 20px;
    // position: relative;
  }
  .btn {
    .el-button--default {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
